<template>
  <div class="home">
    <van-nav-bar>
      <template #left>
        <div class="home-nav">
          <div class="times">{{time}}好</div>
          <div class="userName">{{userName}}</div>
        </div>
      </template>
      <template #right>
        <van-search  v-model="productName" color="#fff" placeholder="请输入商品名称" shape="round" @input="onInput" />
      </template>
    </van-nav-bar>
    <!-- 商品内容 -->
    <div class="home-content" v-if=is>
      <!-- 轮播图 -->
      <div class="banner-box">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in bannerData" :key="index">
            <img class="auto-img" :src="item.bannerImg" alt />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 热卖推荐 -->
      <div class="recommend-box">
        <div class="recommend">热卖推荐</div>
      </div>
    </div>
        <!-- 查询不到的提示 -->
        <div class="notFind" v-if=isQuery>
    <van-empty image="search" description="抱歉，没有找到你想搜索的商品，换个词试试~" >
      <van-loading size="24px" vertical>加载中...</van-loading>
    </van-empty>
    </div>
    <!-- 商品列表 -->
    <div class="a">
        <van-grid :column-num="2" gutter="10" direction="horizontal">
      <van-grid-item icon="photo-o" text="文字" v-for="(item,index) in productData" :key="index" @click="onClick(item)">
        <div class="products">
          <div class="products-items">
            <div class="img-box">
              <img class="auto-img" :src="item.smallImg" />
            </div>
            <div class="product-hot" v-if="item.isHot == 1">hot</div>
            <div class="pro-info">
              <div class="product-name">{{item.name}}</div>
              <div class="product-enname">{{item.enname}}</div>
              <div class="product-price">￥{{item.price}}</div>
            </div>
          </div>
        </div>
      </van-grid-item>
    </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      //定义轮播图数据
      bannerData: [],
      productData: [],
      token:[],
      userName:"游客",
      my:[],
      time:"",
      //判断Banner是否显示
      is:true,
      isQuery:false,
      productName:""
    };
  },
  created() {
    this.token = localStorage.getItem("tk__");
    this.getBannerData();
    this.getProductData();
    this.getTime();
    if(this.token!=null){
      this.getUserData();
    }
  },
  methods: {
    //获取时间
    getTime(){
              let hour = new Date().getHours();
        if(hour>=12 && hour < 14) this.time = "中午"
        else if(hour < 12)  this.time = "早上"
        else if(hour >= 14 && hour < 18 ) this.time="下午";
        else this.time = "晚上"
        // console.log(hour);
    },
    //获取用户名方法
    getUserData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.axios({
        //请求类型
        method: "GET",
        //请求地址
        url: "/findMy",
        params: {
          appkey: this.appkey,
          tokenString:this.token,
        }
      }).then(res => {
        console.log(res);
        this.my = res.data.result;
        this.userName = res.data.result[0].nickName;
        });
      },
    //获取轮播图数据方法
    getBannerData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.axios({
        //请求类型
        method: "get",
        //请求地址
        url: "/banner",
        params: {
          appkey: this.appkey
        }
      }).then(res => {
        // console.log(res);
        this.bannerData = res.data.result;
      });
    },
    //获取商品数据方法
    getProductData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      this.axios({
        //请求类型
        method: "get",
        //请求地址
        url: "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "isHot",
          value: 1
        }
      }).then(res => {
        // console.log(res);
        this.productData = res.data.result;
      });
    },
        // 搜索
        onInput(val){
      this.axios({
        //请求类型
        method: "get",
        //请求地址
        url: "/search",
        params: {
          appkey: this.appkey,
          name:this.productName
        }
      }).then(res => {
        this.isQuery = false;
        this.is = false;
        this.productData = res.data.result;
        if(val=="")this.is=true;
        if(res.data.result.length==0)
          this.isQuery = true;
      });
    },
        //商品的点击事件
        onClick(item) {
          // console.log("跳转到"+item.name+"商品详情页面");
          // console.log(item.pid);
          this.$router.push({ path: "/ProductDetail",query:{id:item.pid} });
    }
  }
};
</script>

<style lang="less" scoped>
.home .home-content {
  padding: 10px;
}
.home .home-nav {
  display: flex;
}
.home .home-content .banner-box {
  border-radius: 15px;
  overflow: hidden;
}
.home .home-content .swpies .auto-img {
  height: 265px;
}
.recommend-box {
  margin: 10px 0px;
  background-color: white;
  height: 50px;
  display: flex;
  align-items: center;
}
.recommend {
  background-color: #0c34ba;
  width: 90px;
  height: 30px;
  color: white;
  font-weight: bolder;
  line-height: 30px;
  border-radius: 0 15px 0 0;
  text-align: center;
}
.img-box {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  overflow: hidden;
}
.products {
  height: 250px;
  position: relative;
}
.product-name {
  font-size: 20px;
  padding: 15px 0px 10px 0px;
}
.product-enname {
  width: 120px;
  color: grey;
  padding: 0px 0px 20px 0px;
  overflow: hidden;
  text-overflow:ellipsis ;
  white-space: nowrap;
}
.product-price {
  color: #0c34ba;
  font-weight: bolder;
  font-size: 17px;
}
.product-hot {
  width: 25px;
  height: 25px;
  background-color: #0c34ba;
  border-radius: 0px 0px 5px 5px;
  position: absolute;
  top: 0px;
  left: 10px;
  color: white;
  text-align: center;
  line-height: 25px;
}
  .home .a{
    padding-bottom: 60px;
  }
  .userName{
    padding-left: 15px;
    font-weight: bolder;
    color: #0c34ba;
  }
/deep/ .van-grid-item__content {
  border-radius: 15px;
  overflow: hidden;
}
/deep/ .van-nav-bar_right {
  overflow: hidden;
  font-weight: bolder;
}
/deep/ .van-search {
  padding: 0;
}
.notFind{
  height: 667px;
}
</style>
